<template>
  <div class="_bgcard">
    <div class="_appodh" id="_appodh">
      <p class="active" @click="oaactive($event,'0')">所有结果</p>
      <p @click="oaactive($event,'1')">待出分</p>
      <el-row :gutter="20" class="header_row">
        <el-col :span="12">
          <el-input placeholder="请输入学号查询" style="width: 180px" clearable v-model="queryFrom.query"></el-input>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" :icon="Search" @click="initGetStudent">查询</el-button>
          <el-button type="primary" @click="handleDialogValue">添加</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="_appocon">
      <el-table :data="tableData" stripe style="width: 100%" height="100%">
        <el-table-column :prop="item.prop" :label="item.label" v-for="(item,index) in exast_options" :key="index">
          <template v-slot="{row}" v-if="item.prop==='userId'">
            <span v-if="row.status === '1'" style="border: 1px solid #4da9ff;color: #4da9ff;padding: 2px 4px;font-weight: 600">预约中</span>
          </template>
          <template v-slot="{row}" v-if="item.prop==='date'">
            <span v-if="row.date === null" style="border: 1px solid #4da9ff;color: #4da9ff;padding: 2px 4px;font-weight: 600">待发布</span>
          </template>
          <template v-slot="{row}" v-if="item.prop==='grade'">
            <span v-if="row.grade === null" style="border: 1px solid #4da9ff;color: #4da9ff;padding: 2px 4px;font-weight: 600">待出分</span>
          </template>
          <template v-slot="{row}" v-if="item.prop==='action'">
            <el-button size="small" type="primary" @click="handleDialogValue1(row)"><el-icon><Edit /></el-icon></el-button>
            <el-button size="small" type="danger" @click="DeleteOne(row.userId,row.examId)"><el-icon><Delete /></el-icon></el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div style="flex: 0.1;margin-bottom: 2px">
      <el-pagination
          v-model:currentPage="queryFrom.pagenum"
          :page-sizes="[4, 8, 10, 14]"
          v-model:page-size="queryFrom.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
  <Dialog v-model="addDialogVisible" :initGetStudents="initGetStudents"/>
  <Dialog1 v-model="updateDialogVisible" :DialogTableValue="DialogTableValue" :initGetStudents="initGetStudents"/>
</template>

<script setup>
import {ref} from "vue";
import { Search , Delete, Edit} from '@element-plus/icons-vue'
import {deleteExanResultBy, getAllExamResult, getExamResultById, getOrderExamResult} from "@/api/exam_result";
import {exast_options} from "@/views/admin/status/options";
import Dialog from '@/components/add/Aexam_result'
import Dialog1 from '@/components/update/Uexam_result'
import {ElMessage} from "element-plus";
// 添加,修改
const addDialogVisible=ref(false)
const updateDialogVisible=ref(false)
const DialogTableValue = ref({})

const tableData = ref([])
const isempty = ref(true)
// 分页器
const total=ref(0)
const queryFrom = ref({
  query:'',
  pagenum:1,
  pagesize:8,
})
const pagetype = ref('0')

//全部，
const initGetStudents = async () =>{
  await getAllExamResult({pageNum:queryFrom.value.pagenum,pageSize:queryFrom.value.pagesize}).then(res=>{
    if (res.code === 20041){
      total.value=res.data.total
      tableData.value=res.data.list
    }else {
      tableData.value = []
      total.value=res.data.total
    }
  })
}
initGetStudents()
//待出分
const GetOrderExamResult = async () =>{
  await getOrderExamResult({pageNum:queryFrom.value.pagenum,pageSize:queryFrom.value.pagesize}).then(res=>{
    if (res.code === 20041){
      total.value=res.data.total
      tableData.value=res.data.list
    }else {
      tableData.value = []
      total.value=res.data.total
    }
  })
}
//删除
const DeleteOne = async (userId,examId) =>{
  await deleteExanResultBy({userId:userId,examId:examId}).then(res=>{
    if (res.code === 20021){
      ElMessage.success('删除成功')
    }else {
      ElMessage.error('删除失败')
    }
    if (pagetype.value === '0'){
      initGetStudents()
    }else {
      GetOrderExamResult()
    }
  })
}
//（）查询
const initGetStudent = async ()=>{
  if(queryFrom.value.query==null||queryFrom.value.query===''){
    await initGetStudents()
  }else {
    await getExamResultById({pageNum:1,pageSize:99999,id:queryFrom.value.query}).then(res=>{
      // console.log(res)
      if(res.code===20041){
        ElMessage({
          message: '查询成功',
          type: 'success',
        })
        total.value=res.data.total
        tableData.value=res.data.list
      }else {
        total.value=res.data.total
        tableData.value=res.data.list
      }
    })
  }
}

const oaactive = async (event,select) =>{
  pagetype.value = select
  queryFrom.value.pagenum = 1
  let appodh = document.getElementById('_appodh')
  appodh.childNodes.forEach(item=>{
    item.classList.remove('active')
  })
  event.target.classList.add('active')
  if (select === '0'){
    await initGetStudents()
  }else {
    await GetOrderExamResult()
  }
}

const handleSizeChange=(pageSize)=>{
  queryFrom.value.pagenum=1
  queryFrom.value.pagesize=pageSize
  if (pagetype.value === '0'){
    initGetStudents()
  }else {
    GetOrderExamResult()
  }

}
const handleCurrentChange=(pageNum)=>{
  queryFrom.value.pagenum=pageNum
  if (pagetype.value === '0'){
    initGetStudents()
  }else {
    GetOrderExamResult()
  }
}
//添加，修改   弹窗
const handleDialogValue=()=>{
  addDialogVisible.value=true
}
const handleDialogValue1=(row)=>{
  updateDialogVisible.value=true
  DialogTableValue.value = JSON.parse(JSON.stringify(row))
}
</script>

<style scoped>
/**{*/
/*  border: 1px solid blue;*/
/*}*/
._bgcard{
  flex: 1;
  margin: 5px 0;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  border: 1px solid #c9c9c9;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
._appodh{
  height: 50px;
  display: flex;
  text-align: center;
  line-height: 50px;
  background-color: #f6f6f6;
}
._appodh>p{
  width: 80px;
  font-weight: 600;
  background-color: inherit;
  cursor: pointer;

}
._appodh>p.active{
  background-color: white;
}
._appocon{
  flex: 0.88;

}
</style>